<template>
	<!-- 页面整体视图 -->
	<view>
		<!-- 顶部导航提示区域 -->
		<view class="top-nav">
			<!-- 显示提示信息，告知用户绑定银行卡的安全要求 -->
			<view>为保证您的资金安全，请绑定账户本人的银行卡</view>
		</view>
		<!-- 表单所在的容器 -->
		<view class="biaoge">
			<!-- 表单元素，用于收集用户输入信息 -->
			<form>
				<view class="form-item">
					<!-- 表单项的标签，提示用户输入的内容 -->
					<label>卡号</label>
					<!-- 输入框和图标所在的容器 -->
					<view class="input-wrapper">
						<!-- 输入框，用于输入银行卡号，使用 v-model 进行数据双向绑定 -->
						<input class="no-border-input" type="text" v-model="formData.cardnumber" placeholder="请输入银行卡号" />
						<!-- 右侧的相机图标，可能用于拍照识别银行卡号 -->
						<image class="camera-icon" src="/photo/bankcard/camera.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-item">
					<label>银行名称</label>
					<input class="no-border-input" type="text" v-model="formData.ext3" placeholder="请输入银行名称" />
				</view>
				<view>
					<uni-section title="银行卡类型" type="line">
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</uni-section>
				</view>
			</form>
			<!-- 下一步按钮，点击触发 connect 方法 -->
			<button class="bt_connect" hover-class="hover-class-1" @click="connect">下一步</button>
		</view>
	</view>
</template>

<script setup>
	// 从 vue 库中引入 ref 函数，用于创建响应式数据
	import {
		ref
	} from 'vue';

	//引入存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';

	//引入拦截器
	import '@/config/requst.js'

	import {
		http
	} from '@/config/requst.js';

	//初始化userStore
	const u = userStore();

	// 创建一个响应式对象 formData，用于存储表单数据
	const formData = ref({
		// 银行卡号初始为空
		cardnumber: '',
		//初始化银行名称为空
		ext1: '',
		//设置id为登录用户的id
		ext2: u.user.id,
		//初始化类型为空
		ext3: ''
	});

	const value = ref('');

	const range = ref([{
		value: '储蓄卡',
		text: '储蓄卡'
	}, {
		value: '信用卡',
		text: '信用卡'
	}]);
	const change = (e) => {
		formData.value.ext1 = e;
		console.log(formData.value);
	}
	//定义添加银行卡函数
	const addBankCard = async () => {
		const res = await http({
			url: "/card/insertCard",
			method: "post",
			data: formData.value
		});
		if (res.code == 20011) {
			uni.showToast({
				title: '添加成功',
				duration: 2000,
			});
			console.log(res);
		} else {
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error'
			});
		}
	}

	// 定义 connect 方法，当点击下一步按钮时触发
	const connect = () => {
		addBankCard();
		//添加成功过后 跳转到银行卡列表页面
		uni.navigateTo({
			url: '/pages/bankCardList/bankCardList'
		})

	};
</script>

<style lang="scss" scoped>
	/* 顶部提示信息文字的样式 */
	.top-nav {
		// 设置提示区域的高度
		height: 80rpx;
		// 设置提示信息垂直居中显示
		line-height: 80rpx;
		// 设置提示信息水平居中显示
		text-align: center;
		// 设置提示信息的字体大小
		font-size: 25rpx;
	}

	/* 表单外的视图容器样式  距离顶部提示信息的外边距 */
	.biaoge {
		// 设置表单容器距离顶部提示信息的外边距
		margin-top: 30rpx;
		// 设置表单容器的宽度为 100%
		width: 100%;
	}

	/* 表单表头样式  添加左外边距  距离手机边框的距离 */
	.form-item {
		// 设置表单项距离手机边框的左外边距
		margin-left: 20rpx;
		// 使用 flex 布局，使表单标签和输入框水平排列并垂直居中
		display: flex;
		align-items: center;
		// 设置表单项之间的底部外边距
		margin-bottom: 15rpx;
	}

	.form-item label {
		// 设置表单标签的宽度
		width: 150rpx;
	}

	/* 按钮样式 */
	.bt_connect {
		// 设置按钮文字颜色为白色
		color: white;
		// 设置按钮宽度为 80%
		width: 80%;
		// 设置按钮的圆角半径
		border-radius: 50rpx;
		// 设置按钮的背景颜色，使用半透明蓝色
		background-color: rgba(1, 66, 244, 0.5);
		// 设置按钮距离上方元素的外边距
		margin-top: 200rpx;
	}

	/* 按钮的点击效果 */
	.hover-class-1 {
		// 点击时按钮向下偏移 3rpx
		top: 3rpx;
		// 点击时按钮背景颜色变为深蓝色
		background-color: #002fa7;
	}

	.input-wrapper {
		// 使用 flex 布局，使输入框和图标水平排列并垂直居中
		display: flex;
		align-items: center;
		// 使输入框和图标在容器内均匀分布
		justify-content: space-around;
	}

	.camera-icon {
		// 设置图标宽度为 24px
		width: 24px;
		// 设置图标高度为 24px
		height: 24px;
		// 设置图标距离输入框的左外边距
		margin-left: 8px;
		// 设置鼠标悬停时显示为指针样式
		cursor: pointer;
	}

	/* 为表单输入框添加样式 */
	.no-border-input {
		// 去除输入框获得焦点时的外边框
		outline: none;
		// 设置输入框的宽度
		width: 500rpx;
		// 设置输入框的高度
		height: 80rpx;
	}

	/* 以下样式可以根据实际情况添加，用于去除可能的内阴影或其他默认样式 */
	.no-border-input::placeholder {
		// 可以根据需要调整占位符的颜色等样式，这里设置为灰色
		color: #999;
	}
</style>